{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3de4ccdd788bb14e98b8d21e9645cfc10d76d9c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.e3e073c00.0.tgz","fileCount":37,"integrity":"sha512-Ntc+nlIRVcUJlMcr2sqmXbdt8imT8BWu5POte0HBg1Y21/IlwzEw7ke5Toywzz5eZvrhT0CwrwxCkB0aqGnDIg==","signatures":[{"sig":"MEUCIBwAYk95ahWYZTEq0NxmWIs06MthFq29gOFCqu07KUD6AiEA8LW5xIFv93pFzsUr3Y4wgqjBoaipGWcozKShGv5GYUc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":786514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPFkCRA9TVsSAnZWagAAtukP/ji2c5W7RFKDKbSvYLam\nfMKd7dsFuTOjjl3+kyqcFc0lGSKOT3Tpyi/3/lwhVWmdP1r+FPbKw9M/AwlQ\nzOGTvClwXdjQi7Oe1szuQHgS5t7B8ANvOvNur8yFY0GMoc+KaBsiUjMv8LWm\nL/kZeZi9vVwfc+PW7IY+2PO+yBw8GhUAeRbYIYi6Sf1ELHTUD7cYXm8nEa67\nzZUYJVTDB7TBj6VeLlll7qLGblwQboPhJe3qgysDs1ggnjZ9TqLXS0Uy+UZt\nwqyudXXU118dM77KYIdOKOy8SmYVwyXRQA72DreDRRK9O2ZagPAXwuHWOOBA\nJLpLkihhOBg/anR15uetBSqL/Yb+WTg67qYXqorueJExw2fs8QzeduR+NpPo\nK+07LZmRFzevQUwDY8Se7euAfTVm5PsTaWqhIKJqHhJHmKHW8QswnUEZ/Qpb\nRwOpocpzFstEMcXx/tV0QVYnW1nX4pe/Vio74EXZrZxih+qKD5d/oZkmsATU\nKNcQHQxRJbratoioK9cIfSEd/NGR56cIcJUSWHSM3nKWFdedlaYfguzvOjRw\nTUNX8cUJPmwgxSsDZGDqVC6XmaEMJGKu2J5STELzzb2pza16aFP+VHSqwvrb\n6uqYaqvM6NZ0CYGFsSpvQxftob9j11PZKa26s0Ltoo140Lq13yHBzjO1gpy9\nmZeL\r\n=zxsp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","name":"@material/menu","module":"index.js","readme":"\n\n# Menus\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## Important Changes\n\nMenu is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\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@use \"@material/list/mdc-list\";\n@use \"@material/menu-surface/mdc-menu-surface\";\n@use \"@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.open = true;\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### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-deprecated-list-item--disabled` modifier class (from [MDC List](../mdc-list)).\nDisabled menu items will be excluded from keyboard navigation.\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.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-deprecated-list` | Required on the nested `ul` element. See [`mdc-list` documentation](../mdc-list) for other `mdc-deprecated-list` classes.\n`mdc-menu__selection-group` | Used to wrap a group of `mdc-deprecated-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`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`min-width($min-width)` | Sets the `min-width` of the menu. Use with units (e.g. `240px`, `15%`, or `calc(200px + 10px)` only.\n\n> See [Menu Surface](../mdc-menu-surface/README.md#sass-mixins) and [List](../mdc-list/README.md#sass-mixins) documentation for additional style customization options.\n\n### Accessibility\n\nPlease see [Menu Button](https://www.w3.org/TR/wai-aria-practices/#menubutton) WAI-ARIA practices article for details on recommended Roles, States, and Properties for menu button (button that opens a menu).\n\nWith focus on the menu button:\n\n * Enter, Space & Down Arrow opens the menu and places focus on the first menu item.\n * Up Arrow opens the menu and moves focus to the last menu item.\n * The focus is set to list root element (where `role=\"menu\"` is set) when clicked or touched. MDC List handles the keyboard navigation once it receives the focus.\n\nUse `setDefaultFocusState` method to set default focus state that will be focused every time when menu is opened.\n\nFocus state | Description\n--- | ---\n`DefaultFocusState.FIRST_ITEM` | Focuses the first menu item. Set this when menu button receives Enter, Space, Down Arrow.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives Up arrow.\n`DefaultFocusState.LIST_ROOT` | Focuses the list root. Set this when menu button Clicked or Touched.\n`DefaultFocusState.NONE` | Does not change the focus. Set this if you do not want the menu to grab focus on open. (Autocomplete dropdown menu, for example).\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-deprecated-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n`hasTypeahead` | Boolean | Proxies to the list's `hasTypeahead` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial) => void` | Proxies to the menu surface's `setAnchorMargin(Partial)` 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`setSelectedIndex(index: number) => void` | Sets the list item to the selected state at the specified index.\n`setIsHoisted(isHoisted: boolean) => void` | Proxies to the menu surface's `setIsHoisted(isHoisted: boolean)` method.\n`setAnchorElement(element: Element) => void` | Proxies to the menu surface's `setAnchorElement(element)` method.\n`getOptionByIndex(index: number) => Element \\| null` | Returns the list item at the `index` specified.\n`getPrimaryTextAtIndex(index: number) => string` | Returns the primary text at the `index` specified.\n`getDefaultFoundation() => MDCMenuFoundation` | Returns the foundation.\n`setDefaultFocusState(focusState: DefaultFocusState) => void` | Sets default focus state where the menu should focus every time when menu is opened. Focuses the list root (`DefaultFocusState.LIST_ROOT`) element by default.\n`setEnabled(index: number, isEnabled: boolean) => void` | Sets the enabled state to `isEnabled` for the menu item at given `index`.\n`layout() => void` | Proxies to the list's layout method.\n`typeaheadMatchItem(nextChar: string) => number` | Adds a character to the typeahead buffer and returns index of the next item in the list matching the buffer.\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: Element, className: string) => boolean` | Returns true if the `element` contains the `className` class.\n`closeSurface(skipRestoreFocus?: boolean) => void` | Closes the menu surface, skipping restoring focus to the previously focused element if `skipRestoreFocus` is true.\n`getElementIndex(element: Element) => number` | Returns the `index` value of the `element`.\n`notifySelected(index: number) => void` | Emits a `MDCMenu:selected` event for the element at the `index` specified.\n`getMenuItemCount() => number` | Returns the menu item count.\n`focusItemAtIndex(index: number)` | Focuses the menu item at given index.\n`focusListRoot() => void` | Focuses the list root element.\n`getSelectedSiblingOfItemAtIndex(index: number) => number` | Returns selected list item index within the same selection group which is a sibling of item at given `index`.\n`isSelectableItemAtIndex(index: number) => boolean` | Returns true if menu item at specified index is contained within an `.mdc-menu__selection-group` element.\n\n### `MDCMenuFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleKeydown(evt: Event) => void` | Event handler for the `keydown` events within the menu.\n`handleItemAction(listItem: Element) => void` | Event handler for list's action event.\n`handleMenuSurfaceOpened() => void` | Event handler for menu surface's opened event.\n`setDefaultFocusState(focusState: DefaultFocusState) => void` | Sets default focus state where the menu should focus every time when menu is opened. Focuses the list root (`DefaultFocusState.LIST_ROOT`) element by default.\n`setSelectedIndex(index: number) => void` | Selects the list item at given `index`.\n`setEnabled(index: number, isEnabled: boolean) => void` | Sets the enabled state of the menu item at given `index`.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenu:selected` | `{detail: {item: Element, 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","gitHead":"6ed0d4833cc10e9b5406989bcd66b072aaa259d3","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"],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e3e073c00.0","@material/rtl":"14.0.0-canary.e3e073c00.0","@material/base":"14.0.0-canary.e3e073c00.0","@material/list":"14.0.0-canary.e3e073c00.0","@material/theme":"14.0.0-canary.e3e073c00.0","@material/ripple":"14.0.0-canary.e3e073c00.0","@material/elevation":"14.0.0-canary.e3e073c00.0","@material/menu-surface":"14.0.0-canary.e3e073c00.0","@material/feature-targeting":"14.0.0-canary.e3e073c00.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.e3e073c00.0_1640034660162_0.6468598371931793","host":"s3://npm-registry-packages"},"_id":"@material/menu@14.0.0-canary.e3e073c00.0","version":"14.0.0-canary.e3e073c00.0"}