{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b0e50e5b9c9c607b709e80c2a3c1da3e37443d5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-1.0.0-1.tgz","fileCount":35,"integrity":"sha512-vT9n3xONKgrLMPdiouPdv6IoaJi0oEc2w4eAok/1EEX6GsbVB4oF/RbNKX0OvzGn0IhkSaTKEFo34qRNwqGjGQ==","signatures":[{"sig":"MEUCIBaNtzIkyMKZuyfjkWAMk7wSrAQLSOyO7uWwCWt4sB7lAiEAvNUfQWn+sskYDepUpaKjOMqLUenVnyhg3bbSw2olIGc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfbXQCRA9TVsSAnZWagAAjvkP/A0SqZKSR026DYQM8a7G\nGV0CBGK0XBFiOWXC4iEBC2E7QqNSmAyOP1sOrLF1U123x2qj4rEB6JkGlJtt\nHqrnjVCLJ2FYTAFHjigoAuz9acct6cHtuRd7WDkrjoac+VTxdVZkDXhHr/sl\nG6R9nkr/FAkua747AdHB4jabfJgm6SdegcLX150D8nqYtEONzys79wH0ON16\ndOlMRDV64Wri7Re9rANthCfuutP6Y1bPMVtIKZ7UYvnqHPsvsJGG/AA930df\nyTCz2PsQ1czQFX3shRWaYQuygTOPpwyBz3vg52b1V27C9r0ODilyjiEPWF7H\nAgJMYS1U/AL2r+W9j8KdScjkmOnaWzYXR1gKeBWzRzTyWIL38xrlAR4gPs+a\nHbG1pDApdGx1VOODOPW8VRppT/cg/9LUhKJIc5WRNNjU6UIkVFUxVmdllpkA\nVq3x/2Z7rSeLHOfEmAlk4HqPU1KTsV7vvz0hBbKr+j9+aiq/OZGAlzbbXsY9\nmXhajgpNidZLSj2o/IatEzQztFouLe/3A0jA+HGDnWFoidyAAJEt7dlcxXr0\n3OsvRht3YETLG+vq0nh3MUB3K6228dKAVxU7JPnTpseMJ/p9p4THG3/gfG5a\nXlYJoYpns6YtZcXwlwqWKgSlhcrahyBSXklyLgzWbfOkEaUO5vRozRt290dK\n+4Rn\r\n=N1pc\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\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`isFirstElementFocused() => boolean` | Returns a boolean value indicating if the first focusable element of the menu-surface is focused.\n`isLastElementFocused() => boolean` | Returns a boolean value indicating if the last focusable element of the menu-surface is focused.\n`focusFirstElement() => void` | Focuses the first focusable element of the menu-surface.\n`focusLastElement() => void` | Focuses the last focusable element of the menu-surface.\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","license":"MIT","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@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":"6.7.0","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":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0-1","@material/shape":"^1.0.0-1","@material/theme":"^1.0.0-1","@material/animation":"^1.0.0-1","@material/elevation":"^1.0.0-1","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_1.0.0-1_1551742415569_0.28266342455016624","host":"s3://npm-registry-packages"},"_id":"@material/menu-surface@1.0.0-1","version":"1.0.0-1"}