{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"369b1fdf445bd7cebdac9c5e52ccd0f3a1942987","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.39.0-0.tgz","fileCount":13,"integrity":"sha512-+E5JGAZtX1/nYhJpckzFDeCvoC7JoeL4tnQCArznEUfybCi1HqsDt+fKd9qFbcOIwa6o0WemFdQb4MBSMG3WIA==","signatures":[{"sig":"MEUCIQDSFhj4rksnzIuN3em0eimgrPqHUvCWFybhsXWXF/QpGQIgaV4DfEuimM0AU97yCMJXyPq4DzRxA8/DS/0OJbqAdE4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdZVdCRA9TVsSAnZWagAAD/EP/iAAETJ6r3Yo4uO9tkrS\n/OtlDOdzKqQMzredw+eYqAn+unk7wYIZleeOAKOB2dfjzdCrh3LzMykYYZPN\nmQSPW0miChjmIZGX31pD6NicDdMt017sjmkFrI+18e29/Xhu28AKLD2T8kol\nqvQ0vyJHysldZZ+c7VKUvofigANQ/OsinuVboo+LERd6IwEkb68rZS88ROvJ\niazTwR8V5ZacecnPmZl1kBwpvrCRgXSLuZ7lgnEbRI+FcnXYW5wPO1H1cAlR\nEsAUW9epjSjxiEB8eK8l/LPnzy6JBzZQylpQxAbLn5ZIIysNoqNb5UodBB/9\ntkqnTpNOMWyDAwNliJe7M0E5KAhHa9x7JCZn+YWE2GTyenDQfUwSbMalvurJ\nvuRmEMB8KSUCrQ1GHqdb5XeDzJMRNUIAiaspha7DfcDLkmsOaKGmziHYExfW\n9JyJ16mwO5eMaoHrIKdM4HVr69j0v0oihFp4F1s3vRAF8JbYg5o9A+f6foko\nq1e2cEHXmKjQli5nPVEAXWfNTJsjjHf1NwjucQKcDKK6T9Bh+mvzAcZnJewB\nSWvq41wvXqlIiTLONz/UWMFyrbitzW4zcBtEPHlIVyIKx46sV6X8bTKT8/kS\n2IxULn/BYgf2dkbwF/WKNwDewa3hBkEucSU4ZHeAG04RjHGdNKg0QpXzDXpf\n8CTW\r\n=x56r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","name":"@material/menu","readme":"\n\n# Menus\n\n\n\nA menu displays a list of choices on a temporary surface. They appear when users interact with a button, action, \nor other control.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/menu\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/menu/mdc-list\";\n@import \"@material/menu/mdc-menu-surface\";\n@import \"@material/menu/mdc-menu\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenu} from '@material/menu';\n\nconst menu = new MDCMenu(document.querySelector('.mdc-menu'));\nmenu.show();\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Selection Group Menu\n\nMenus can contain a group of list items that can represent the selection state of elements within the group.\n\n```html\n
\n \n
\n```\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu can be positioned to automatically anchor to a parent element when opened.\n\n```html\n
\n
\n ...\n
\n
\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n
\n \n
\n ...\n
\n
\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n
\n...\n
\n```\n\n```js\n// ...\nmenu.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu can use absolutely positioned when being displayed.\n\n```html\n
\n...\n
\n```\n\n```js\n// ...\nmenu.hoistMenuToBody(); // Not required if the menu is already positioned on the body.\nmenu.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu` | Required on the root element\n`mdc-menu-surface` | Required on the root element. See [`mdc-menu-surface` documentation](../mdc-menu-surface) for other `mdc-menu-surface` classes.\n`mdc-list` | Required on the nested `ul` element. See [`mdc-list` documentation](../mdc-list) for other `mdc-list` classes.\n`mdc-menu__selection-group` | Used to wrap a group of `mdc-list-item` elements that will represent a selection group.\n`mdc-menu__selection-group-icon` | Required when using a selection group to indicate which item is selected. Should contain an icon or svg that indicates the selected state of the list item.\n`mdc-menu-item--selected` | Used to indicate which element in a selection group is selected.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-width($width)` | Used to set the `width` of the menu. When used without units (e.g. `4` or `5`) it computes the `width` by multiplying by the base width (`56px`). When used with units (e.g. `240px`, `15%`, or `calc(200px + 10px)` it sets the `width` to the exact value provided.\n\n## `MDCMenu` Properties and Methods\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | Boolean | Proxies to the menu surface's `open` property.\n`items` | Array | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(AnchorMargin) => void` | Proxies to the menu surface's `setAnchorMargin(AnchorMargin)` method.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the menu surface's `setAbsolutePosition(x: number, y: number)` method.\n`setFixedPosition(isFixed: boolean) => void` | Proxies to the menu surface's `setFixedPosition(isFixed: boolean)` method.\n`hoistMenuToBody() => void` | Proxies to the menu surface's `hoistMenuToBody()` method.\n`setIsHoisted(isHoisted: boolean) => void` | Proxies to the menu surface's `setIsHoisted(isHoisted: boolean)` method.\n`setAnchorElement(element: HTMLElement) => void` | Proxies to the menu surface's `setAnchorElement(element)` method.\n`getOptionByIndex(index: number) => ?HTMLElement` | Returns the list item at the `index` specified.\n`getDefaultFoundation() => MDCMenuFoundation` | Returns the foundation.\n\n> See [Menu Surface](../mdc-menu-surface/README.md) and [List](../mdc-list/README.md) documentation for more information on proxied methods and properties.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu 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### `MDCMenuAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClassToElementAtIndex(index: number, className: string) => void` | Adds the `className` class to the element at the `index` specified.\n`removeClassFromElementAtIndex(index: number, className: string) => void` | Removes the `className` class from the element at the `index` specified.\n`addAttributeToElementAtIndex(index: number, attr: string, value: string) => void` | Adds the `attr` attribute with value `value` to the element at the `index` specified.\n`removeAttributeFromElementAtIndex(index: number, attr: string) => void` | Removes the `attr` attribute from the element at the `index` specified.\n`elementContainsClass(element: HTMLElement, className: string) => boolean` | Returns true if the `element` contains the `className` class.\n`closeSurface() => void` | Closes the menu surface.\n`getElementIndex(element: HTMLElement) => number` | Returns the `index` value of the `element`.\n`getParentElement(element: HTMLElement) => ?HTMLElement` | Returns the `.parentElement` element of the `element` provided.\n`getSelectedElementIndex(element: HTMLElement) => number` | Returns the `index` value of the element within the selection group provided, `element` that contains the `mdc-menu-item--selected` class.\n`notifySelected(index: number) => void` | Emits a `MDCMenu:selected` event for the element at the `index` specified.\n`getCheckboxAtIndex(index: number) => ?HTMLElement` | Returns the checkbox element contained within the element at the `index` specified.\n`toggleCheckbox(checkbox: HTMLElement) => void` | Toggles the `checkbox` element provided and triggers a `change` event for the element.\n\n### `MDCMenuFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleKeydown(evt: Event) => void` | Event handler for the `keydown` events within the menu.\n`handleClick(evt: Event) => void` | Event handler for the `click` events within the menu.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenu:selected` | `{detail: {item: HTMLElement, index: number}}` | Used to indicate when an element has been selected. This event also includes the item selected and the list index of that item.\n","license":"Apache-2.0","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"homepage":"https://github.com/material-components/material-components-web#readme","keywords":["material components","material design","menu"],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.0","description":"The Material Components for the web menu 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"}],"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/list":"^0.39.0-0","@material/menu-surface":"^0.39.0-0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_0.39.0-0_1534432604971_0.21524082886510976","host":"s3://npm-registry-packages"},"_id":"@material/menu@0.39.0-0","version":"0.39.0-0"}