{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ff0104448ec3f31cac4bfb025fd7b07e106d1ae","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-3.0.0-alpha.0.tgz","fileCount":36,"integrity":"sha512-defTKnGmPYK90ZBHRP6tnMd4C+oei5Z74L28rQ+wsCCmZlDby/GWhDPLEgQuvfLJI3cg100peZUTdj9O9g7tBg==","signatures":[{"sig":"MEYCIQDwKiKP+QQWyuQU58OiOeDNoeClaANMjGpVN9Xi9j2u7AIhAP22qzfxXf0YINm26N0bnmC3SH4a96O2cV1ty94l/qjU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAHpbCRA9TVsSAnZWagAAoeIP/3h54W11Su489MkGfwZH\nnNgXIgvGx40uAY6+27PDR2jcZmdgFhAWUvZ35A2kjk9G+en6aUarx4b/YzHO\nIT4+sp8EA98hZ62dodlOJ0f1tGPUhvlGJU7P9n/tstmDeORHArqlykEdPK5B\nlBgA5jK2Spq670xQqP9/KxWsKzUVKfcBqAKUXtDl3S/t+pa/51xTFGPsJY/b\nxHfa/L8sRvKn/uDU5hxufkjyyyUD4Xxe1qFo7t1imcYBsVb83vu1twySYQFn\n4SontCXDOKlAPbrS3XHyGzsxe/ieXUwjJTty79RzZ4iuaiL1FJo2gldwl0H3\nPrkS7Ie8ahvFf4xcCQlGdGk8tl8s8h5e0T7xpKx8wwnG9mML834gmazAb5e2\nsjDu8gvpQ1OiAQNT6LTb9yWbWoEkQ79IwfmgBCiqxpxjVL1NJJTb/izoMXN3\nJadzC8E01xlf81QY1O39hts0xjG340Sb8cOYbeApuUot0Zvpq9Q5J2qKWF4B\n8FKHUDbgZkLGpFJCO7houqDc3sEFmPK+cybvJHdHJM67D1TmfHxYy/sfHVLU\nPnBbNTp6MYr398RXBFcr0CD437IDl6w+iJlfRMhVtXGuDDGpmcvZnOUIQUNp\nvA14FWTwrdwe4h7l1nq97oXh7/L4WoPDMWxDd6f2ZJmCx/sAfcwQnH7mbuCb\nL/Pd\r\n=Qaon\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","name":"@material/menu-surface","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu (`body` if using `hoistMenuToBody()`) has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.hoistMenuToBody(); // Not required if the menu-surface is already positioned on the body.\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic. Should be used with conjunction with `hoistMenuToBody()`.\n`hoistMenuToBody() => void` | Removes the `menu-surface` element from the DOM and appends it to the `body` element. Should be used to overcome `overflow: hidden` issues.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","gitHead":"094e507fcfb488303e5adec97f7f985b30e8567e","license":"MIT","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"homepage":"https://github.com/material-components/material-components-web#readme","keywords":["material components","material design","menu surface"],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","description":"The Material Components for the web menu surface component","directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/shape":"^3.0.0-alpha.0","@material/theme":"^3.0.0-alpha.0","@material/animation":"^1.0.0","@material/elevation":"^3.0.0-alpha.0","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_3.0.0-alpha.0_1560312410590_0.09614803433080943","host":"s3://npm-registry-packages"},"_id":"@material/menu-surface@3.0.0-alpha.0","version":"3.0.0-alpha.0"}