{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15915ef2f6a177beb60675481d6d452ad268b29e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.35.0.tgz","fileCount":12,"integrity":"sha512-BIe78v+92OQNPwdeqqUS3bGQcaI//zLpGRb6FXPoTftZpwDGWS2tgog9IY10g3xm54iE35INHOZG4WTSk7regA==","signatures":[{"sig":"MEUCIEJ2yY3KIW8BWbv7hiivhHDSy+d5CfuBRB/6xTS0QIJZAiEA2ud9++dUFJbB1eoVfqq279/rQdrjpo+hlEPHzq474Sc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":154213,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3mDfCRA9TVsSAnZWagAApOYP/jt0bh2WDQ0RNmN7ghut\nkAEdzbngKjtV9fMA9W9w5bI9zUb/e6Mnxqe26TtXk+0NK/0DqOjpct1pnKsq\ncpHiCpg9hl7jKiaFIMhUbQuDaMrZMLCWRmnxTq3z4ln1kFPVz6EjFNtdPWn0\n7hyjWZ/F62NWiQet2hWoWS6rYBT8gznQXE1p+5bTfwtzb2Pvpxuq4ARzesIW\nKPcjB9lNgaoHOYG5m347guSkMlBqvktqjgDBMWci0AeQEExT3pL4X3IRuHy7\n60T7Qr0to5leijOj4HsaXB7gVd0wR+aeRHvZH5iTr+Yjsh0s1Z6uooK1CkON\nMkZPystXziajizSW6hdF/nne3/vn6lGTbvepW5Cefjp0TE0/7tzQEQHUxgu6\n0KVrMgglvGCEnrIxCbazy+3dHpJmc0DYNcRCQfrIzhlQwZtvI69zsltzYw91\nYShn3JFwjyTHD3wdSpU+07gqHrx4QjCycUA9+ZnlyOxFG07OTO1gzkD7q5m+\nCBn20UAqLIonIsidlHhH5BDptiUX6VfepgTovPDPB7X3n9ekHSk1aipxui3b\n7kIuPAOPA99R57JaNdyse2Le+uRynePlXycoqqFkJrGu8ShJ42tRe7uZH8sK\nfsb8hqhN/KOCMOlouWsYTwYAlcbxaolZSXUEg3+TxfclIrPJm/8XHWZ6zAZv\n1D18\r\n=FD3Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","name":"@material/menu","readme":"\n\n# Menus\n\n\n\nThe MDC Menu component is a spec-aligned menu component adhering to the\n[Material Design menu specification](https://material.io/guidelines/components/menus.html).\nMenus require JavaScript to properly position themselves when opening.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/menu\n```\n\n## Usage\n\n### HTML Structure\n\nA menu is initially hidden, appearing when opened via the JS API. It is appropriate for any display size.\n\n```html\n
\n \n
\n```\n\n#### Anchor 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#### Disabled menu items\n\nWhen used in components such as MDC Menu, list items can be disabled.\nTo disable a list item, set `aria-disabled` property to `\"true\"`, and set `tabindex` to `\"-1\"`.\n\n```html\n
\n \n
\n```\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu` | Mandatory\n`mdc-menu--animating-open` | Indicates the menu is currently animating open. This class is removed once the animation completes.\n`mdc-menu--open` | Indicates the menu is currently open, or is currently animating open.\n`mdc-menu--animating-closed` | Indicates the menu is currently animating closed. This class is removed once the animation completes.\n\n### JS Examples\n\n```js\n // Instantiation\n var menuEl = document.querySelector('#toolbar');\n var menu = new mdc.menu.MDCMenu(menuEl);\n var menuButtonEl = document.querySelector('#menu-button');\n\n // Toggle menu open\n menuButtonEl.addEventListener('click', function() {\n menu.open = !menu.open;\n });\n\n // Listen for selected item\n menuEl.addEventListener('MDCMenu:selected', function(evt) {\n var detail = evt.detail;\n });\n\n // Set Anchor Corner to Bottom End\n menu.setAnchorCorner(Corner.BOTTOM_END);\n\n // Turn off menu open animations\n menu.quickOpen = true;\n```\n\n### `MDCMenu`\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 foundation's `isOpen`/(`open`, `close`) methods.\n`items` | Array | Proxies to the foundation's container to query for all `.mdc-list-item[role]` elements.\n`itemsContainer` | Element | Queries the foundation's root element for the `mdc-menu__items` container element.\n`quickOpen` | Boolean | Proxies to the foundation's `setQuickOpen()` method.\n\nMethod Signature | Description\n--- | ---\n`show({focusIndex: ?number}) => void` | Proxies to the foundation's `open()` method. An optional config parameter allows the caller to specify which item should receive focus after the menu opens.\n`hide() => void` | Proxies to the foundation's `close()` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(AnchorMargin) => void` | Proxies to the foundation's `setAnchorMargin(AnchorMargin)` method.\n`getDefaultFoundation() => MDCMenuFoundation` | Returns the foundation.\n\n### `MDCMenuAdapter`\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`hasNecessaryDom() => boolean` | Returns boolean indicating whether the necessary DOM is present (namely, the `mdc-menu__items` container).\n`getAttributeForEventTarget(target: EventTarget, attributeName: string) => string` | Returns the value of a given attribute on an event target.\n`getInnerDimensions() => {width: number, height: number}` | Returns an object with the items container width and height.\n`hasAnchor: () => boolean` | Returns whether the menu has an anchor for positioning.\n`getAnchorDimensions() => {width: number, height: number, top: number, right: number, bottom: number, left: number}` | Returns an object with the dimensions and position of the anchor (same semantics as `DOMRect`).\n`getWindowDimensions() => {width: number, height: number}` | Returns an object with width and height of the page, in pixels.\n`getNumberOfItems() => number` | Returns the number of _item_ elements inside the items container. In our vanilla component, we determine this by counting the number of list items whose `role` attribute corresponds to the correct child role of the role present on the menu list element. For example, if the list element has a role of `menu` this queries for all elements that have a role of `menuitem`.\n`registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type`.\n`deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type`.\n`registerBodyClickHandler(handler: EventListener) => void` | Adds an event listener `handler` for event type `click`.\n`deregisterBodyClickHandler(handler: EventListener) => void` | Removes an event listener `handler` for event type `click`.\n`getIndexForEventTarget(target: EventTarget) => number` | Checks to see if the `target` of an event pertains to one of the menu items, and if so returns the index of that item. Returns -1 if the target is not one of the menu items.\n`notifySelected(evtData: {index: number}) => void` | Dispatches an event notifying listeners that a menu item has been selected. The function should accept an `evtData` parameter containing an object with an `index` property representing the index of the selected item. Implementations may choose to supplement this data with additional data, such as the item itself.\n`notifyCancel() => void` | Dispatches an event notifying listeners that the menu has been closed with no selection made.\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`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu is focused.\n`focus() => void` | Focuses the root element of the menu.\n`getFocusedItemIndex() => number` | Returns the index of the currently focused menu item (-1 if none).\n`focusItemAtIndex(index: number) => void` | Focuses the menu item with the provided index.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu element.\n`setPosition(position: {top: string, right: string, bottom: string, left: string}) => void` | Sets the position of the menu element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu element.\n\n### `MDCMenuFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corder: Corner) => void` | Sets the corner that the menu will be anchored to. See [constants.js](https://github.com/material-components/material-components-web/blob/cc299230728ba5a994866ebd31aaaf1a0f4cc87f/packages/mdc-menu/constants.js#L73)\n`setAnchorMargin(margin: AnchorMargin) => void` | Sets the distance from the anchor point that the menu should be shown.\n`open({focusIndex: ?number}) => void` | Opens the menu. Optionally accepts an object with a `focusIndex` parameter to indicate which list item should receive focus when the menu is opened.\n`close(evt: ?Event)` | Closes the menu. Optionally accepts the event to check if the target is disabled before closing the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu should open and close without animation when the `open`/`close` methods are called.\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`MDCMenu:cancel` | none | Event emitted when the menu is closed with no selection made (e.g. if the user hits `Esc` while it's open, or clicks somewhere else on the page).\n","license":"Apache-2.0","_npmUser":{"name":"bonniez","email":"bonniez@google.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":"5.6.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":"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.7.0","dependencies":{"@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/animation":"^0.34.0","@material/elevation":"^0.35.0","@material/typography":"^0.35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_0.35.0_1524523230068_0.3883007806186918","host":"s3://npm-registry-packages"},"_id":"@material/menu@0.35.0","version":"0.35.0"}